<template>
  <div class="right">
    <div class="top">
      <div class="tab">{{ title }}</div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const title = ref('')
watch(route, (nval, oval) => {
  title.value = nval.meta.name as string
},{ immediate: true })
</script>

<style lang="less" scoped>
// 右侧内容区
.right {
  width: 1020px;
  
  .top {
    width: 100%;
    margin-bottom: 10px;
    background: #fff;
    display: flex;

    .tab {
      width: 116px;
      font-size: 14px;
      padding: 28px 30px;
      box-sizing: border-box;
      color: #111;
    }
  }
}
</style>